<template >
  <div id="keyperson">
    <div class="img"><img  :src='datainfo.imgurl'  alt=""/></div>
    <div class="name"><h3>{{datainfo.name}}</h3><div class="type">{{datainfo.type}}</div></div>
    <div class="desc">
      <i class="icon"><wioc-icon-svg name="iconfangxun"></wioc-icon-svg></i>
      风险等级：{{datainfo.level}}<span style="padding-left: 0.125rem">{{datainfo.status}}</span></div>
  </div>
</template>

<script>
export default {
  name: 'wioc-keyperson',
  props: ['datainfo'],
  data () {
    return{
    }
  },
  created(){
  }
}
</script>
<style lang="less" scoped>
  #keyperson{
    width: 4.1875rem;
    height: 1.4375rem;
    border-radius: 0.25rem;
    background-color: #fff;
    margin-top: 0.1875rem;
    box-shadow: -0.125rem 0 0 #f9f9f9, //左边阴影
                 0 -0.125rem 0 #f9f9f9, //顶部阴影
                 0 0.125rem 0 #f9f9f9, //底部阴影
                 0.125rem 0 0 #f9f9f9; //右边阴影
    .img{
      padding-top: 0.2875rem;
      padding-left: 0.5rem;
      width:0.875rem; height:0.875rem;
	  font-size: 0.16rem;
      img{
        width:0.875rem; height:0.875rem; border-radius:50%;
      }
    }
    .name{
      float: left;
      margin-left: 1.6875rem;
      display: -webkit-box;
      margin-top: -0.8125rem;
      h3{
        margin: 0rem;
        font-size: 0.1875rem;
        padding-right: 0.1875rem;
      }
      .type{
        background-color: #6aa6ed;
        border-radius: 0.125rem;
        width: 0.4375rem;
        height: 0.21875rem;
        color: #fff;
        margin-top: 0.025rem;
        font-size: 0.15625rem;
        text-align: center;
      }
    }
    .desc{
      margin-left: 1.6875rem;
      float: left;
      font-size: 0.1875rem;
      margin-top: -0.3125rem;
      .icon{
        .icon-svg{
          color: #f66464;
          margin-top: -0.0625rem;
          padding-right:0.03125rem
        }
      }
    }
  }
</style>
